<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省市区三级联动测试</title>
</head>

<body>
    <select id="province">
        <option>---请选择省份---</option>
    </select>
    <select id="city">
        <option>---请选择市</option>
    </select>
    <select id="region">
        <option>---请选择区---</option>
    </select>
    <script>
        var province = document.getElementById("province");
        var city = document.getElementById("city");
        var region = document.getElementById("region");
        var xmlhttp = new XMLHttpRequest();
        window.onload = function () {
            xmlhttp.open("get", "province.php", true);
            xmlhttp.send(null);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var data = xmlhttp.responseText;//获取省份并添加
                    data = data.split("，");
                    for (var i = 0; i < data.length; i++) {
                        var option = document.createElement("option");
                        province.appendChild(option);
                        option.innerHTML = data[i];
                    }
                }
            }

            province.onchange = function () {
                var optionCity = document.querySelectorAll("#city option");//省份改变时，首先清除市、区的下拉选项
                var optionRegion = document.querySelectorAll("#region option");
                for (var i = optionCity.length - 1; i > 0; i--) {
                    city.removeChild(optionCity[i]);
                }
                for (var i = optionRegion.length - 1; i > 0; i--) {
                    region.removeChild(optionRegion[i]);
                }
                xmlhttp.open("post", "city.php", true);
                xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xmlhttp.send("provinceName=" + province.value);
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        var data = xmlhttp.responseText;//获取市并添加
                        data = data.split("，");
                        for (var i = 0; i < data.length; i++) {
                            var option = document.createElement("option");
                            city.appendChild(option);
                            option.innerHTML = data[i];
                        }
                    }
                }
            }

            city.onchange = function () {
                var options = document.querySelectorAll("#region option");//市改变时，首先清除区的下拉选项
                for (var i = options.length - 1; i > 0; i--) {
                    region.removeChild(options[i]);
                }
                xmlhttp.open("post", "region.php", true);
                xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xmlhttp.send("cityName=" + city.value);
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        var data = xmlhttp.responseText;//获取区并添加
                        data = data.split("，");
                        for (var i = 0; i < data.length; i++) {
                            var option = document.createElement("option");
                            region.appendChild(option);
                            option.innerHTML = data[i];
                        }
                    }
                }
            }
        }
    </script>
</body>

</html>